<template>
  <!-- 自定义标签 -->
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    @tab-remove="removeTab"
    @tab-click="clickTab"
    class="elTabs"
  >
    <!-- 首页不允许关闭 -->
    <el-tab-pane
      v-for="item in editableTabs"
      :closable="item.name == 'index' ? false : true"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
       
    };
  },
  computed: {
    editableTabsValue: {
      get() {
        return this.$store.state.editableTabsValue;
      },
      set(val) {
        this.$store.state.editableTabsValue = val;
      },
    },
    editableTabs: {
      get() {
        return this.$store.state.editableTabs;
      },
      set(val) {
        this.$store.state.editableTabs = val;
      },
    },
  },
  methods: {
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      //不允许删除首页
      if (targetName === "index") {
        return;
      }
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      this.$router.push({ name: activeName });
    },
    clickTab(target) {
      // console.log(target);
      this.$router.push({ name: target.name });
    },
  },
  // created(){
  //   this.clickTab()
  // }
};
</script>

<style lang="scss" scoped>
.elTabs {
  /deep/ .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0;
  }
  //去除tabs点击时的出现的下划线
  /deep/ .el-tabs__item.is-active {
    border-bottom: none;
  }
  /deep/ .el-tabs__item {
    text-align: center;
    font-size: 0.5rem;
  }
}
/deep/ .el-tabs__item.is-active {
  color: #eee;
  background-color: #506ee4;
}
</style>